<template>
  <div class="qyui-cell row qyui-container" :loading="loading">
    <div style="position: relative;height: 100%; width:100%;overflow: hidden;">
      <div
        ref="containerRef"
        style="position:absolute;height: calc(100% - 20px);width:calc(100% - 20px);
            left:20px;top:20px;
            background-color:#808000;overflow: auto;"
      >
        <div style="position: relative;height: 1000px; width:2000px;overflow: hidden;">
          <PanReportPage v-if="!loading"></PanReportPage>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import PanReportPage from './PanReportPage.vue';
import ReportInfoManager from './ReportInfoManager.js';
import { getQueryString } from '@/utils/index';
import { computed } from 'vue';
export default {
  components: {
    PanReportPage,

  },
  provide() {
    return {
      manager: computed(() => this.manager),
    };
  },
  data() {
    const manager = new ReportInfoManager();
    return {
      loading: true,
      manager,
      demo: import.meta.env.MODE === 'demo',
    };
  },
  computed: {

  },
  mounted() {
    this.init();
  },
  methods: {
    async  init() {
      if (this.demo) {
        // 演示环境使用数据
        await this.manager.loadReport(1);
      } else {
        let reportId = getQueryString('id');
        reportId = reportId || -1;

        await this.manager.loadReportCellData(reportId);
      }
      this.loading = false;
    },

  },
};
</script>
<style lang="scss">
.wrapper {
  background-color: #f5f5f5;
  position: absolute;
  top: 0;
  left: 0;
  width: 1018px;
  height: 618px;
}

#screens {
  position: relative;
  ;
  width: 100%;
  height: 100%;
  overflow: auto;
}

.screen-container {
  position: absolute;
  width: 2000px;
  height: 2000px;
}

.scale-value {
  position: absolute;
  left: 0;
  bottom: 100%;
}

.button {
  position: absolute;
  left: 100px;
  bottom: 100%;
}

.button-ch {
  position: absolute;
  left: 200px;
  bottom: 100%;
}

.button-en {
  position: absolute;
  left: 230px;
  bottom: 100%;
}

#canvas {
  position: absolute;
  top: 80px;
  left: 50%;
  margin-left: -80px;
  width: 160px;
  height: 200px;
  background: lightblue;
  transform-origin: 50% 0;
}
</style>
